<template>
	<view>
		<!-- <mynavbar titleText='订单'></mynavbar> -->
		<view style="width: 100%; border-bottom: 0 none; position: fixed; z-index: 2">
			<view style="background: #ffffff; position: relative">
				<view class="h-tab vp-flex">
					<view :class="'h-tab-item vp-flex_1 ' + (filt == '' ? 'on' : '')" data-filt=""
						@tap="onFilterChange">全部</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 1 ? 'on' : '')" data-filt="1"
						@tap="onFilterChange">待接单</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 2 ? 'on' : '')" data-filt="2"
						@tap="onFilterChange">待支付</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 3 ? 'on' : '')" data-filt="3"
						@tap="onFilterChange">待陪诊</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 4 ? 'on' : '')" data-filt="4"
						@tap="onFilterChange">陪诊中</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 5 ? 'on' : '')" data-filt="5"
						@tap="onFilterChange">已完成</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 6 ? 'on' : '')" data-filt="6"
						@tap="onFilterChange">已取消</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx"></view>
		<block v-if="list != null">
			<view v-if="list != null && list.length == 0" style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center">
				<image src="../static/images/empty.png" mode="widthFix" style="width: 200rpx" />
				<view class="f5">没有相关内容~</view>
			</view>
			<view v-else class="od-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="od-item" @tap="toOrder" :data-id="item.orderCode">
						<view class="weui-cell weui-cell_access">
							<view class="weui-cell__hd">
								<view>
									<image
										:src="item.escortInfo ? item.escortInfo.avatar : '../static/images/avatar.jpg'"
										mode="widthFix" class="od-logo"
										style="width: 100rpx; height: 100rpx; margin-right: 30rpx" />
								</view>
							</view>
							<view class="weui-cell__bd">
								<view>
									<text style="font-weight: bold">陪诊员：{{ item.escortInfo.name }}</text>
								</view>
								<view class="od-info">
									<!-- 代跑取药 -->
									<block v-if="item.stype == 3">
										<view>
											<text>{{ item.hospitalName }}</text>
										</view>
										<view>
											<text style="font-weight: bold">订单金额：{{item.orderPrice}}元</text>
										</view>
										<view>
											服务类别：
											<text>{{item.type}}</text>
										</view>
										<view>
											预约取药时间：
											<text>{{item.orderStartTime}}</text>
										</view>
										<view>
											服务人员：
											<text>{{ item.patientInfo.patientName }}</text>
										</view>
										<view>
											联系方式：
											<text>{{ item.patientInfo.patientPhone }}</text>
										</view>
										<view>
											陪诊员联系方式：
											<text>{{ item.escortInfo.phone }}</text>
										</view>
									</block>

									<!-- 陪诊服务 -->
									<block v-if="item.stype == 1">
										<view>
											<text>{{ item.hospitalName }}</text>
										</view>
										<view>
											<text style="font-weight: bold">订单金额：{{item.orderPrice}}元</text>
										</view>
										<view>
											服务类别：
											<text>{{item.type}}</text>
										</view>
										<view>
											预约时间：
											<text>{{item.orderStartTime}}</text>
										</view>
										<view>
											就诊人员：
											<text>{{ item.patientInfo.patientName }}（{{ item.patientInfo.sex == 0 ? '女' : '男' }}）</text>
										</view>
										<view>
											联系方式：
											<text>{{ item.patientInfo.patientPhone }}</text>
										</view>
									</block>
								</view>
								<button @click.stop="() => onAccess(item)" v-if="item.orderStatus === 5">去评论</button>
								<button @click.stop="() => completeOrder(item)"
									v-if="item.orderStatus === 4">立即完成</button>
							</view>
							<view class="weui-cell__ft">
								<!-- 待付款 -->
								<block v-if="item.orderStatus == '待支付'">
									<view style="color: #ffa200"><text>待支付</text></view>
									<view style="color: #ffa200">
										<counter style="font-size: 24rpx" :second="item._exp_time"
											@counterOver="onCounterOver" />
									</view>
								</block>
								<!-- 进行中 -->
								<block v-if="item.orderStatus == '待陪诊'">
									<view style="color: #1da6fd"><text>待陪诊</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.orderStatus == '已完成'">
									<view style="color: #21c521"><text>已完成</text></view>
								</block>
								<!-- 已取消 -->
								<block v-if="item.orderStatus == '已取消'">
									<view style="color: #999999"><text>已取消</text></view>
								</block>

								<block v-if="item.orderStatus == '待接单'">
									<view style="color: #999999"><text>待接单</text></view>
								</block>
								<block v-if="item.orderStatus == '陪诊中'">
									<view style="color: #999999"><text>陪诊中</text></view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>

	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import mynavbar from '@/components/navbar/navbar.vue'

	const app = getApp()
	onShow(() => {
		filt.value = app.globalData.orders_filt
		console.log('filt.value', filt.value);
		loadList()
	})
	const filt = ref('')
	const onFilterChange = (e) => {
		// console.log('切换状态',e);
		filt.value = e.currentTarget.dataset.filt
		loadList()
	}

	//获取的订单数据
	const list = ref(null)

	const userInfo = uni.getStorageSync('userInfo');
	const loadList = () => {
		let param;
		if (filt.value) {
			if (userInfo.role == 1) {
				param = {
					isAdmin: false,
					status: Number(filt.value)
				}
			} else{
				param = {
					isAdmin: false,
					status: Number(filt.value),
					isEscort: true
				}
			}
		} else {
			if (userInfo.role == 1) {
				param = {
					isAdmin: false
				}
			} else {
				param = {
					isAdmin: false,
					isEscort: true
				}
			}

		}

		console.log("参数", param);
		app.globalData.utils.myrequest({
			myurl: '/order/list',
			data: param,
			header: {
				'Authorization': uni.getStorageSync('token'),
				'Source-Platform': 'mini-program'
			},
			mysuccess: (res) => {
				console.log('获取订单信息', res);
				list.value = res.data
			},
			myfail: (err) => {
				console.log('获取订单信息错误', err);
				return uni.showToast({
					title: '获取订单信息错误',
					icon: 'error'
				})
			}
		})

	}

	const onAccess = (item) => {
		// 序列化订单信息并进行base64编码
		const encodedOrderInfo = encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
			url: `../access/access?orderInfo=${encodedOrderInfo}`
		})
	}
	// 完成订单
	const completeOrder = (item) => {
		app.globalData.utils.myrequest({
			myurl: '/order/complete',
			data: {
				orderCode: item.orderCode
			},
			header: {
				'Authorization': uni.getStorageSync('token'),
				'Source-Platform': 'mini-program'
			},
			mysuccess: (res) => {
				return uni.showToast({
					title: '已完成',
					icon: 'error'
				})
			},
			myfail: (err) => {
				return uni.showToast({
					title: '错误修改状态',
					icon: 'error'
				})
			}
		});
	}

	const toOrder = (e) => {
		uni.navigateTo({
			url: `./order?orderCode=${e.currentTarget.dataset.id}`
		})
	}
	const onCounterOver = () => {
		loadList()
	}
</script>

<style>
	@import url('./index.css');
</style>